import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ConfigProvider } from "../../providers/config/config";
import { HttpServicesProvider } from "../../providers/http-services/http-services";
import { UtilsProvider } from "../../providers/utils/utils";

/**
 * Generated class for the CollectInforPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage({
  segment: 'CollectInforPage',
  defaultHistory: ['HomePage']
})
@Component({
  selector: 'page-collect-infor',
  templateUrl: 'collect-infor.html',
})
export class CollectInforPage {
  imgPath = '';
  random_num = '';
  img={
    imgWidth:"",
    imgLeft:"",
    imgTop:"",
    imgHeight:""
  }
  
  constructor(
    public navCtrl: NavController,
    public config: ConfigProvider,
    public util: UtilsProvider,
    public httpService: HttpServicesProvider,
    public navParams: NavParams) {
  }

  ionViewDidLoad() {
  }
  /**
     * 图片上传
     * */
  uploadImage(e) {
    let file = e.target.files[0];
    let data = new FormData();
    data.append('image', file);
    data.append('type', 'moments');
    this.httpService.uploadImage('/user/upload_file', data, result => {
      this.imgPath = result.img_path;
      this.imgCenter()
    });
    

  }
  imgCenter(){
    var image = new Image();
    var realWidth = 0;//储存图片实际宽度
    var realHeight = 0;//储存图片实际高度
    //获取图片的宽高
    image.src = 'http://admin.moments.taoxiansheng.com'+this.imgPath;
    //加载成功的处理\
    let that=this;
    image.onload = function () {
        realWidth = image.width;//获取图片实际宽度
        realHeight = image.height;//获取图片实际高度
        //让img的宽高相当于图片实际宽高的等比缩放，然后再偏移
        if (realWidth > realHeight){
          that.img.imgWidth = (160/realHeight)*realWidth + 'px';//等比缩放宽度            
          that.img.imgHeight = '160px' ;//跟div高度一致
          that.img.imgLeft = '-'+((160/realHeight)*realWidth-160)/2 + 'px';
        }else {
            // img.style.width =100  + 'px';
            // img.style.height = 100 + 'px';
            that.img.imgHeight = (160/realWidth)*realHeight + 'px';//等比缩放宽度            
            that.img.imgWidth = '160px' ;//跟div高度一致
            that.img.imgTop =  '-'+((160/realWidth)*realHeight-160)/2 + 'px';
        }
    };

  }
  delImage(item, value) {
    this.util.presentConfirm('确定删除吗？', () => {
      // let index = this.util.inArray(this.infoData[item.letter], value);
      // if (index > -1) {
      //     this.infoData[item.letter].splice(index, 1);
      // }
      this.imgPath = ''
    });
  }
  // 输入框只能输入数字
  numFilt() {
    if (this.random_num.length > 16) {
      this.util.presentAlert('串码最多16位');
      this.random_num = this.random_num.slice(0, 16)
    } else {
      this.random_num = this.random_num.replace(/^\D/g, '')
    }
  }


  goPage(page, data = {}) {
    this.navCtrl.push(page, data).then(success => {
      if (success !== true) {//页面需要登录后跳转
        this.navCtrl.push('LoginPage', data);
      }
    })
  }

  // 提交
  submitData() {
    if (!this.imgPath) {
      this.util.presentAlert('图片还没有上传');
      return false
    }
    if (this.random_num == '') {
      this.util.presentAlert('串码不能为空');
      return false
    }

    if (this.random_num.length != 16) {
      this.util.presentAlert('串码位数不正确');
      return false
    }
    this.httpService.requestPostData('/bottle_collect/add_info', {
      token: this.config.getToken(),
      image: this.imgPath,
      random_num: this.random_num
    }, (response) => {
      if (response['error'] == 200) {
        this.util.presentAlert(response.message);
        this.imgPath = '';
        this.random_num = ''
      } else {
        this.util.presentAlert(response.message);
      }
    });
  }


}
